<template>
  <div class="registeredActive">
    <h3>充值/活跃/注册</h3>
    <div class="searchBox">
      <div class="tagList">
        <ul>
          <li
            v-for="(item,index) in tagList"
            :key="index"
            :class="[activeIndex==index?'active':'']"
            @click="searchTag(item,index)"
          >{{item}}</li>
        </ul>
      </div>
      <div class="search">
        <div class="cond2 cond">
          <label>日期</label>
          <el-date-picker
            v-model="search1"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </div>
        <div>
          <el-button type="primary" icon="el-icon-search" @click="searchMethod">搜索</el-button>
        </div>
      </div>
    </div>
    <div id="recharge"></div>
    <div id="active"></div>
    <div id="reg"></div>
  </div>
</template>
<script>
export default {
  name: "registeredActive",
  data() {
    return {
      search1: "",
      tagList: ["近30日", "近90日"],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      activeIndex: 0,
      activeText: 30,
      initData: {}
    };
  },
  mounted() {
    this.getInitData();
  },
  methods: {
    searchMethod() {
      this.getInitData();
    },
    //获取初始化数据
    async getInitData() {
      let parames = {
        handshake: "",
        data: {
          last_day: this.activeText,
          start_date:this.search1&&this.search1.length>0?this.search1[0]:"",
          end_date:this.search1&&this.search1.length>1?this.search1[1]:"",
          // date:this.search1
        }
      };
      let res = await this.$axios.post(
        this.$api.statisticsInfo,
        JSON.stringify(parames)
      );
      if (res.code == 200) {
        this.initData = res.data;
        this.creatReg();
        this.creatActive();
        this.creatRecharge();
      } else {
        this.$message({
          message: res.message,
          type: "warning"
        });
      }
    },
    //搜索标签
    searchTag(item, index) {
      this.activeIndex = index;
      if (index == 0) {
        this.activeText = 30;
      } else if (index == 1) {
        this.activeText = 90;
      }
      this.getInitData();
    },
    //充值统计
    creatRecharge() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("recharge"));
      // 指定图表的配置项和数据
      let option = {
        title: {
          text: "充值统计  更新时间：" + this.initData.update
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: ["总金额","ios金额","安卓金额"]
        },
        xAxis: {
          type: "category",
          axisTick: {
            alignWithLabel: true
          },
          data: this.initData.date
        },
        yAxis: {
          type: "value",
          axisTick: {
            alignWithLabel: true
          },
          // data: this.initData.price
        },
        series: [
          {
            name: "总金额",
            data: this.initData.price,
            type: "line",
            smooth: true
          },
          {
            name: "ios金额",
            data: this.initData.ios_price,
            type: "line",
            smooth: true
          },
          {
            name: "安卓金额",
            data: this.initData.android_price,
            type: "line",
            smooth: true
          },
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
   
    creatActive() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("active"));
      // 指定图表的配置项和数据
      let option = {
        title: {
          text: "日活统计  更新时间：" + this.initData.update
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: ["ios活跃", "安卓活跃","vip活跃","非vip活跃","总活跃"]
        },
        xAxis: {
          type: "category",
           axisTick: {
            alignWithLabel: true
          },
          data: this.initData.date
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            name: "ios活跃",
            data: this.initData.ios_active,
            type: "line",
            smooth: true
          },
          {
            name: "安卓活跃",
            data: this.initData.android_active,
            type: "line",
            smooth: true
          },
          {
            name: "vip活跃",
            data: this.initData.vip_active,
            type: "line",
            smooth: true
          },
          {
            name: "非vip活跃",
            data: this.initData.normal_active,
            type: "line",
            smooth: true
          },
          {
            name: "总活跃",
            data: this.initData.all_active,
            type: "line",
            smooth: true
          },
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
     creatReg() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("reg"));
      // 指定图表的配置项和数据
      let option = {
        title: {
          text: "注册统计  更新时间：" + this.initData.update
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: ["ios注册", "安卓注册","vip注册","非vip注册","总注册"]
        },
        xAxis: {
          type: "category",
           axisTick: {
            alignWithLabel: true
          },
          data: this.initData.date
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            name: "ios注册",
            data: this.initData.ios_register,
            type: "line",
            smooth: true
          },
          {
            name: "安卓注册",
            data: this.initData.android_register,
            type: "line",
            smooth: true
          },
          {
            name: "vip注册",
            data: this.initData.vip_register,
            type: "line",
            smooth: true
          },
          {
            name: "非vip注册",
            data: this.initData.normal_register,
            type: "line",
            smooth: true
          },
          {
            name: "总注册",
            data: this.initData.all_register,
            type: "line",
            smooth: true
          },
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },

  }
};
</script>
<style scoped>
h3 {
  padding: 0.2rem;
  color: #3c763d;
}
#recharge {
  margin-top: 0.2rem;
  width: 100%;
  height: 3rem;
}
#reg {
  margin-top: 0.2rem;
  width: 100%;
  height: 3rem;
}
#active {
  margin-top: 0.2rem;
  width: 100%;
  height: 3rem;
}
.search {
  display: flex;
  padding-left: 0.2rem;
  width: 100%;
  flex-wrap: wrap;
}
.el-input {
  width: 2.5rem;
}
.search label {
  width: 0.83rem;
  height: 0.4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f5f7fa;
  color: #909399;
  border: 1px solid #dcdfe6;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  font-size: 14px;
}
.cond {
  display: flex;
  margin-right: 0.4rem;
  margin-bottom: 0.1rem;
}
.tagList {
  width: 1.4rem;
}
.tagList ul {
  display: flex;
  align-items: center;
  width: 100%;
}
.tagList li {
  background: rgb(26, 213, 226);
  color: #fff;

  cursor: pointer;
  height: 0.4rem;
  width: 0.7rem;
  text-align: center;
  line-height: 0.4rem;
}
.tagList li:hover {
  background: rgb(25, 168, 179);
}
.tagList .active {
  background: rgb(25, 168, 179);
}
.searchBox {
  display: flex;
  justify-content: flex-start;
  padding-left: 0.2rem;
}
</style>